<template>
  <div>
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-if="$permiss[808]">
        <el-form-item :label="$t('所属租户')">
          <el-select v-model="page.adminUserId" style="width: 100%" @change="tenantChange">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[809]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productNames" multiple clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户状态')">
          <el-select style="width: 100%" v-model="page.isRepeatedBorrowing" clearable>
            <el-option :label="$t('初借')" :value="0"></el-option>
            <el-option :label="$t('复借')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户来源')">
          <el-select style="width: 100%" v-model="page.isNatural" clearable>
            <el-option :label="$t('自然量')" :value="1"></el-option>
            <el-option :label="$t('投放量')" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('申请时间')">
          <el-date-picker
              :clearable="false"
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <Table :loading="loading" :table-column="tableColumn" :table-data="tableData" :page="page"
             @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"/>
    </el-card>
  </div>
</template>

<script>
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";
import {machineRefuseStatistics} from "@/api/order"
import {selectProduct, selectTenant} from "@/api/system";

export default {
  name: 'MachineRefuse',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(14),
        productNames: []
      },
      tenantList: [],
      productList: [],
      tableColumn: [
        {label: this.$t('申请时间'), prop: 'time', minWidth: 150,fixed:'left'},
        {label: this.$t('申请订单数'), prop: 'loanNum', minWidth: 100,fixed:'left'},
        {label: this.$t('规则拒绝订单数'), prop: 'ruleRefuseOrderNum', minWidth: 150,fixed:'left'},
        {label: this.$t('规则通过率'), prop: 'rulePassRates', minWidth: 100,fixed:'left'},
      ],
      tableData: [],
      loading: false,
    }
  },
  mounted() {
    this.getSelect()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const [datetimeStart, datetimeEnd] = dateFormatSection(this.page.timeValue || [])
      const params = {
        ...this.page,
        datetimeStart, datetimeEnd
      }
      delete params.timeValue
      const res = await machineRefuseStatistics(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableColumn = [
          {label: this.$t('申请时间'), prop: 'time', minWidth: 100,fixed:'left'},
          {label: this.$t('申请订单数'), prop: 'loanNum', minWidth: 100,fixed:'left'},
          {label: this.$t('规则拒绝订单数'), prop: 'ruleRefuseOrderNum', minWidth: 120,fixed:'left'},
          {label: this.$t('规则通过率'), prop: 'rulePassRates', minWidth: 100,fixed:'left'},
        ]
        if (list.length > 0) {
          const column = list[0]
          if (column.rulesRates.length > 0) {
            // 动态添加表头
            column.rulesRates.forEach((item, index) => {
              this.tableColumn.push({
                label: item,
                prop: 'RULES_' + index,
                minWidth: 120
              })
            })
          }
          // 去除第一列数据
          const data = list.filter((item, index) => index > 0)
          this.tableData = data.map((item) => {
            item.rulesRates.forEach((v, index) => {
              item['RULES_' + index] = v
            })
            delete item.rulesRates
            delete item.rules
            return item
          })
        } else {
          this.tableData = []
        }
        this.page = {
          ...this.page,
          total: total,
        }
        this.loading = false
      }
    },
    async getSelect() {
      this.tenantList = await selectTenant().then(res => res.data)
      if (this.tenantList.length !== 0) {
        // 管理员查看默认第一位租户
        this.page.adminUserId = this.tenantList[0].adminUserId
      }
      this.productList = await selectProduct({adminUserId: this.page.adminUserId}).then(res => res.data)
      if (this.productList.length !== 0) {
        // 默认选择一个产品
        this.page.productNames = [this.productList[0].productName]
      }
      this.getTableData()
    },
    async tenantChange(value) {
      this.productList = await selectProduct({adminUserId: value}).then(res => res.data)
      if (this.productList.length !== 0) {
        // 默认选择一个产品
        this.page.productNames = [this.productList[0].productName]
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    clearSearch() {
      this.page = {
        ...this.page,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        isRepeatedBorrowing: null,
      }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
